import React, { Component } from 'react'

import {
  CateListContainer
} from './style'

class Cate extends Component {

  state = {
    activeList: ['active', '', '']
  }
  activeFn = index => {
    let activeList = this.state.activeList.map(item => '')
    activeList[index] = 'active'
    this.setState({ activeList })
  }

  render() {
    return (
      <CateListContainer>
        <div>
          <ul>
            <li onClick={this.activeFn.bind(this, 0)} className={this.state.activeList[0]}><span>分类1</span></li>
            <li onClick={this.activeFn.bind(this, 1)} className={this.state.activeList[1]}><span>分类2</span></li>
            <li onClick={this.activeFn.bind(this, 2)} className={this.state.activeList[2]}><span>分类3</span></li>
          </ul>
        </div >
        <div>
          <ul>
            <li>afewfewfew</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
            <li>菜名</li>
          </ul>
        </div>
      </CateListContainer >
    );
  }
}

export default Cate;
